<template>
  <div>
    <a-button type="primary" @click="open = true">搜索地点</a-button>
    <a-modal v-model:open="open" width="800px" title="搜索地点">
      <div v-if="open">
        <iframe id="mapPage" width="100%" height="600px" :src="mapConfig.url"></iframe>
      </div>
      <template #footer>
        <a-button type="primary" @click="handleOk">确定</a-button>
        <a-button @click="handleCancel">取消</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue';
  import * as api from '@/api/components';
  import * as cityApi from '@/api/common/city';
  import { CitySelectorBo } from '@/api/common/city/model/citySelectorBo';

  defineOptions({
    name: 'MapSelector',
  });
  const lat = defineModel('lat', {
    type: Number,
    default: 0,
  });
  const lng = defineModel('lng', {
    type: Number,
    default: 0,
  });
  const address = defineModel('address', {
    type: String,
    default: '',
  });
  const province = defineModel('province', {
    type: String,
    default: '',
  });
  const provinceName = defineModel('provinceName', {
    type: String,
    default: '',
  });
  const city = defineModel('city', {
    type: String,
    default: '',
  });
  const cityName = defineModel('cityName', {
    type: String,
    default: '',
  });
  const area = defineModel('area', {
    type: String,
    default: '',
  });
  const areaName = defineModel('areaName', {
    type: String,
    default: '',
  });
  const open = ref(false);
  const mapConfig = reactive({
    url: '',
    loc: null,
    cityList: [] as CitySelectorBo[],
  });
  const handleOk = () => {
    let loc = mapConfig.loc;
    if (!loc) {
      return;
    }
    lng.value = loc.latlng.lng;
    lat.value = loc.latlng.lat;
    let poiaddress = loc.poiaddress;
    let poiname = loc.poiname;
    address.value = `${poiaddress} ${poiname}`;
    let reg = /.+?(省|市|自治区|自治州|县|区)/g; // 省市区的正则
    let match = poiaddress.match(reg);
    if (match) {
      let match0 = match[0];
      provinceName.value = match0;
      province.value = mapConfig.cityList
        .filter((item) => item.name == match0)
        .map((item) => item.id)
        .join(',');
      let match1 = match[1];
      cityName.value = match1;
      city.value = mapConfig.cityList
        .filter((item) => item.name == match1)
        .map((item) => item.id)
        .join(',');
      let match2 = match[2];
      areaName.value = match2;
      area.value = mapConfig.cityList
        .filter((item) => item.name == match2)
        .map((item) => item.id)
        .join(',');
    }
    open.value = false;
  };
  const handleCancel = () => {
    open.value = false;
  };

  onMounted(() => {
    window.addEventListener(
      'message',
      function (event) {
        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
        let loc = event.data;
        if (loc && loc.module == 'locationPicker') {
          //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
          console.log('location', loc);
          mapConfig.loc = loc;
        }
      },
      false,
    );
    api.getMapKey().then((key) => {
      mapConfig.url = `https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=${key}&referer=xy-erp`;
    });
    cityApi.selector().then((res) => {
      console.log('selector', res);
      mapConfig.cityList = res;
    });
  });
</script>

<style scoped></style>
